
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/font-awesome.min.css">
	<link rel="stylesheet" href="css/login.css">
	<style>

	</style>
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <div><a class="navbar-brand" href="index.html" style="font-size:32px;">无忧·用户车险注册平台</a></div>
        </div>
      </div>
    </nav>

    <div class="container">
      <form class="form-signin" action="login.html" role="form" onsubmit="return chcek()">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>
		  <div class="form-group has-success has-feedback">
			<input type="text" class="form-control" id="pwd" placeholder="请输入登录密码" style="margin-top:10px;" onkeyup="checkPassword()"><span id="span_pwd"></span>
			<span class="glyphicon glyphicon-lock form-control-feedback"></span>
		 </div>
		  <div class="form-group has-success has-feedback">
			<input type="text" class="form-control"  placeholder="请确认输入登录密码" id="repwd" style="margin-top:10px;" onkeyup="checkRePassword()"/><span id="span_repwd"></span>
			<span class="glyphicon glyphicon-lock form-control-feedback"></span>
		 </div>
		  <div class="form-group has-success has-feedback">
			<input type="text" class="form-control"  placeholder="请输入手机号" style="margin-top:10px;">
			<span class="glyphicon glyphicon glyphicon-earphone form-control-feedback"></span>
		  </div>
		  <button class="btn btn-lg btn-success btn-block"> 获取手机验证码</button>
		  <div class="form-group has-success has-feedback">
			<input type="text" class="form-control"  placeholder="请输入验证码" style="margin-top:10px;">
			<span class="glyphicon glyphicon glyphicon-comment form-control-feedback"></span>
		  </div>
		  <div class="form-group has-success has-feedback">
			<img title="点击图片切换验证码" id="vcodeImg" src="LoginServlet?method=GetVCode">
		 </div>
          <input id="submit" type="submit"  value="注册" class="btn btn-lg btn-success btn-block" />
      </form>
    </div>
    <script src="jquery/jquery-2.1.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">    
          
           function checkPassword(){
           	  var pwd = document.getElementById("pwd").value;
              var repwd = document.getElementById("repwd").value; 
           	  var   re =/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/;
   		        var res=  re.test(pwd);
   		        
   		        var unsapn = document.getElementById("span_pwd");
   		        if(!res){
   		        	   unsapn.innerHTML="<font color='red'>密码至少包含大写字母，小写字母，数字，且不少于6位！</font>"
			   		 		   return false;
   		        }else{
   		        	   unsapn.innerHTML="<font color='green'>输入的密码可用！</font>"
   		        	   return true;
   		        }
           }
           
           function checkRePassword(){
           	 var pwd = document.getElementById("pwd").value;
             var repwd = document.getElementById("repwd").value; 
           	 var unsapn = document.getElementById("span_repwd");
           	      if(pwd!=repwd){
           	      	 unsapn.innerHTML="<font color='red'>两次密码输入是不一致的!</font>"
			   		 		     return false;
           	      }else{
           	      	reresapn.innerHTML = "";
						        return true;
           	      }
           }
           
           function chcek(){
               var flag = checkPassword() && checkRePassword();
               return flag;
    	      	}
    </script>
  </body>
</html>